<template>
  <!-- 表格内容 -->
  <el-table :data="tableData" stripe style="width: 100%">
    <template v-for="(item, index) in columns">
      <!-- 默认 -->
      <el-table-column
        :key="index"
        v-if="item.field"
        :label="item.title"
        :width="item.width"
        :prop="item.field">
      </el-table-column>
      <!-- 默认end -->
      <!-- 自定义的 -->
      <el-table-column
        :key="index"
        :width="item.width"
        v-else
        :label="item.title">
        <template slot-scope="scope">
          <!-- switch -->
          <el-switch
            v-if="item.type === 'switch'"
            v-model="scope.row[item.payload.field]"
            @change="item.payload.change(scope.row)"
            active-color="#13ce66"
            inactive-color="#ff4949"></el-switch>
          <!-- switch end -->
          <!-- button -->
          <template v-if="item.type === 'btn'" fixed="right">
            <el-button
              size="mini"
              :type="item.type"
              v-for="(item, index) in item.payload"
              :key="index"
              @click="item.click(scope.row)">
              <span v-if="item.name">{{ item.name }}</span>
              <i v-else :class="item.icon"></i>
            </el-button>
          </template>
          <!-- button end -->
        </template>

        <!-- <template slot-scope="scope">
        {{ scope.row[item.field] }}
      </template> -->
      </el-table-column>
      <!-- 自定义end -->
    </template>
  </el-table>
  <!-- 表格内容 -->
</template>

<script>
export default {
  props: {
    tableData: {
      require: true,
      type: Array
    },
    columns: {
      /*
        [
            {title,field,...}
        ]
        */
      require: true,
      type: Array
    }
  }
};
</script>

<style></style>
